<section>
	<div>
		<ul class="breadcrumb">
			<li><a href="/view/index.html">Home</a></li>
			<li>Clusters</li>
		</ul>
	</div>
	<div id="toolbar">
		<button id="add" class="btn btn-primary">
			<i class="glyphicon glyphicon-tasks"></i> Create
		</button>
	</div>
	<table id="table" data-toolbar="#toolbar" data-search="true" data-click-to-select="true" data-pagination="true" data-id-field="id" data-page-list="[10, 25, 50, 100, all]">
		<thead>
			<tr>
				<th data-field="id">ID</th>
				<th data-field="code">Code</th>
				<th data-field="name">Name</th>
				<th data-field="createTime" data-formatter="dateTimeFormatter">CreateTime</th>
				<th data-events="window.operateEvents" data-formatter="operateFormatter">Actions</th>
			</tr>
		</thead>
		<tbody></tbody>
	</table>

	<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-hidden="false">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">×</button>
					<h4>Add cluster</h4>
				</div>
				<div class="modal-body">
					<div id="tip" class="alert alert-info">${error}</div>
					<form role="form" action="/view/cluster/save" method="post">
						<input name="action" value="${action}" type="hidden"> <input name="id" value="${cluster.id}" type="hidden">
						<div class="form-group">
							<label>Code (Global Uniqueness) <i class="glyphicon glyphicon-star red"></i></label> <input type="text" class="form-control" name="code" value="${cluster.code}">
						</div>
						<div class="form-group">
							<label>Name (Cluster Uniqueness) <i class="glyphicon glyphicon-star red"></i></label> <input type="text" class="form-control" name="name" value="${cluster.name}">
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<a href="#" class="btn btn-default" data-dismiss="modal">Close</a> <a href="#" class="btn btn-primary" data-dismiss="modal" id="addSave">Save</a>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-hidden="false">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">×</button>
					<h4>Edit cluster</h4>
				</div>
				<div class="modal-body">
					<div id="tip" class="alert alert-info">${error}</div>
					<form role="form">
						<input name="id" type="hidden">
						<div class="form-group">
							<label>Code (Global Uniqueness) <i class="glyphicon glyphicon-star red"></i></label> <input type="text" class="form-control" name="code">
						</div>
						<div class="form-group">
							<label>Name (Cluster Uniqueness) <i class="glyphicon glyphicon-star red"></i></label> <input type="text" class="form-control" name="name">
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<a href="#" class="btn btn-default" data-dismiss="modal">Close</a> <a href="#" class="btn btn-primary" data-dismiss="modal" id="editSave">Save</a>
				</div>
			</div>
		</div>
	</div>
</section>

<script>
	function dateTimeFormatter(value, row, index) {
		if (value == null) {
			return "";
		}
		return new Date(value).toLocaleString();
	}

	function operateFormatter(value, row, index) {
		return [
				'<a class="edit btn btn-default" href="javascript:void(0)" title="Like">',
				'<i class=" glyphicon glyphicon-edit"></i> Edit',
				'</a>  ',
				'<a class="remove btn btn-default" href="javascript:void(0)" title="Remove">',
				'<i class="glyphicon glyphicon-trash"></i> Delete', '</a>' ]
				.join('')
	}

	window.operateEvents = {
		'click .edit' : function(e, value, row, index) {
			$('#editModal input[name=id]').val(row.id);
			$('#editModal input[name=code]').val(row.code);
			$('#editModal input[name=name]').val(row.name);
			$('#editModal').modal('show');
		},
		'click .remove' : function(e, value, row, index) {
			//ajax to delete
			//
			$('#table').bootstrapTable('remove', {
				field : 'id',
				values : [ row.id ]
			})
		}
	}

	function initTable() {
		$.ajax({
			type : 'GET',
			url : '/api/cluster/list',
			success : function(data) {
				if (data) {
					$('#table').bootstrapTable('destroy').bootstrapTable({
						height : 850,
						data : data
					})
				}
			}
		});
	}

	$(function() {
		initTable();

		$('#add').click(function(e) {
			e.preventDefault();
			$('#addModal').modal('show');
		});
		$('#addSave').click(function(e) {
			e.preventDefault();
			initTable();
		});
		$('#editSave').click(function(e) {
			// e.preventDefault();
			var $code = $('#editModal input[name=code]');
			var code = $code.val();
			if (!code) {
				//$code.parent().addClass('has-error');
				return false;
			}
			initTable();
		});
	})
</script>